<route lang="yaml">
meta:
  layout: home
</route>

<template>
  <div class=" bg-white ">
    <div class="text-2xl flex justify-start px-8  leading-16! divide_b">
      编辑
    </div>

    <!-- 内容版块 -->
    <div class="px-2 py-4 md:px-8 md:py-20 flex flex-col items-center">
      <div>
        <div>
          <img ref="userImg" :src="IMG_URL_SERVER+user?.avatar?.url" :alt="user?.avatar?.name" class="avatar wh-16 mx-auto"/>
        </div>

        <el-dropdown ref="dropdownDom" trigger="click">
          <div class="pt-4 text-lg text-blue-400 cursor-pointer">修改头像</div>
          <template #dropdown>
            <div class="expressions-list">
              <div :key="item?._id" v-for="item in picList" @click="emitPic(item)" class="expressions">
                <img  class="cursor-pointer" :src="IMG_URL_SERVER +item?.url" :alt="item?.name">
              </div>
            </div>
          </template>
        </el-dropdown>
      </div>

      <el-form :model="form" class="w-80% pt-8">
          <el-form-item label="昵称">
            <el-input  show-word-limit maxlength="12" v-model="form.nickname" />
          </el-form-item>

  
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio :label="`male`">男</el-radio>
              <el-radio :label="`female`">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="个性签名">
            <el-input show-word-limit maxlength="48" rows="4" v-model="form.headline" type="textarea" />
          </el-form-item>

          <el-form-item>
            <div class="w-full flex justify-center">
              <el-button  type="primary" @click="onSubmit">保存</el-button>
            </div>
          </el-form-item>
        </el-form>

    </div>

  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { fetchPatchUserInfo,fetchAvatarList } from "@/server";
import { IMG_URL_SERVER } from "@/config"



//用户store
const { user } = storeToRefs(useAuthStore())
console.log(user);
//重载
const { handleReload } = inject<any>("reload")
//图片列表
const picList = ref()
//头像dom
const userImg = ref()
//下拉菜单Dom
const dropdownDom = ref()



const form = reactive({
  nickname: user.value.nickname,
  gender: user.value.gender,
  headline: user.value.headline,
  avatar:user.value.avatar._id
})

//表情按钮点击发送图片到头像
const emitPic = (img:any)=>{
  userImg.value.src = IMG_URL_SERVER +img.url
  form.avatar = img._id
  dropdownDom.value.handleClose()
}


const onSubmit = () => {
  console.log(form)
  fetchPatchUserInfo(form).then(()=>{
    handleReload(500)
  })

}

//更新时发送fetch
watchEffect(()=>{
  //获取表情包
  fetchAvatarList(()=>true).then((data)=>{
    picList.value = data
  })


},{flush:'post'})


</script>

<style scoped lang="scss">
.expressions-list{
  display: grid;
  padding: 4px;
  grid-template-columns: repeat(4,4rem);
  grid-template-rows: repeat(auto-fill,4rem);
  gap: 4px;
  height: 16rem;

  .expressions{
    display: inline-block;
    width: 4rem;
    height: 4rem;
    position: relative;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
    }
  }
}
</style>